<template>
	<view class="content" v-if="pageshow">
		<view class="padding tree">
			<view class="background" style="box-sizing: border-box;">
				<view class="daowu flexleft" @click="changetype">
					<view :class="order_type==1?'wuliu':'daodian'">到店核销</view>
					<view :class="order_type==2?'wuliu':'daodian'">物流配送</view>
				</view>
				<!--收货-->
				<view class="addshouhuo border_2" @click="add" v-if="!addressData.id && order_type==2">点击添加收货地址
				</view>
				<view class="flexbetween border_2  padding ffffff margin_top" @click="add"
					v-if="addressData.id && order_type==2">
					<view class="border-r1">
						<view class="name">{{addressData.name}}</view>
						<text class="name tel">{{addressData.mobile}}</text>
						<view class="flexleft">
							<view class="address margin_right2"></view>
							<view class="margin_top">{{addressData.cityinfo}}{{addressData.address_detail}}</view>
						</view>
					</view>
					<view class="greey_icon"></view>
				</view>
				<!---中间item-->
				
				<view class="" v-for="item in dataAll.lists" :key="item.shop_id">
					<view class="margin_top border_2">
						<view class="border-r1  padding ffffff margin_top" v-if="order_type==1">
							<view class="name">{{item.shopinfo.name}}</view>
							<view class="flexleft">
								<view class="address margin_right2"></view>
								<view class="margin_top">{{item.shopinfo.cityinfo}}</view>
							</view>
						</view>
					</view>
					<view class=" margin_top ffffff padding border_2" v-for="ite in item.products" :key="ite.id">
						<view class="flexleft " style="width: 100%;">
							<view style="width:20%;">
								<image :src="ite.image_text" class="productimg"></image>
							</view>
							<view class="aside margin_top">
								<view class="theme yihang">{{ite.title}}</view>
								<view class=" padding_top15 txt3">{{ite.sku.difference.join()}}</view>
								<view class="flexbetween padding_top15">
									<view class="txt4">￥{{ite.sku.price}}</view>
									<view class="txt3">x{{ite.number}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="yunshu flexbetween border_2" v-if="order_type==2">
						<view class="yunfei" style="padding: 0;">运费</view>
						<view class="baoyou">{{item.freight.price==0?"全国包邮":item.freight.price}}</view>
					</view>
					<view class="yunshu border_2" style="margin-bottom: 200rpx;">
						<view class="yunfei">备注</view>
						<textarea placeholder="请输入留言信息给卖家" v-model="item.remarks" style="height: 50px;"></textarea>
					</view>
				</view>
				<view class="bottomsubmitbtn flexbetween" style="z-index: 10;">
					<view class="flexcenter">
						<view class="zongji">合计：</view>
						<view class="price1">￥{{order_type==1?order_typePrice1:order_typePrice2}}</view>
					</view>
					<view class="submitcontext" @click="pay">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pageshow:false,
				order_type: 2, //1到店自取，2物流
				data:[],
				sourcetype:1,//来源：1商品详情，2购物车
				addressData:{},
				dataAll:{},
				address_id:"",
				order_typePrice1:0,//到店自取总价
				order_typePrice2:0,//含物流总价
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.data = data.data
			this.sourcetype = data.sourcetype
		},
		onShow() {
			uni.$off("checkAddressId")
			uni.$on("checkAddressId",data=>{
				this.address_id = data
			})
			this.getdetail()
		},
		methods: {
			getdetail(){
				httpRequest.request('/api/order/getOrderGoodsList', 'POST', {
					address_id:this.address_id,
					order_type:this.order_type,
					data:this.data,
				}).then(res => {
					if (res.code == 1) {
						let num = 0
						res.data.orderData.lists.forEach(item=>{
							num = Number(num) + Number(item.order_price)
							this.$set(item,"remarks","")
						})
						
						this.dataAll = res.data.orderData
						if(res.data.addressData){
							this.addressData = res.data.addressData
						}
						this.order_typePrice1 = Number(num).toFixed(2)
						this.order_typePrice2 = res.data.orderData.statis.allsub
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					} else {
						httpRequest.toast('网络开小差啦');
					}
					this.pageshow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			pay() {
				let _this=this
				// uni.showLoading({
				// 	title: '请稍候...',
				// 	mask:true,
				// })
				if(!_this.addressData.id &&_this.order_type==2){
					// uni.hideLoading()
					httpRequest.toast('请填写收货地址!');
					return false;
				}
				let url=''
				if(_this.data.type==1){
					url='api/order/addOrder'
				}else if(_this.data.type==2||_this.data.type==3){
					url='api/orderdl/addOrder'
				}
				let data = {
					address_id: _this.addressData.id || "",
					order_type: _this.order_type,
					lists: [],
				}
				_this.dataAll.lists.forEach(item=>{
					let arr = {
						shop_id:item.shop_id,
						remarks:item.remarks,
						products:[]
					}
					item.products.forEach(ite=>{
						arr.products.push({
							goods_id:ite.id,
							number:ite.number,
							sku_id:ite.sku.id
						})
						
					})
					data.lists.push(arr)
				})
				if(this.sourcetype==2){
					this.scgwc()
				}
				httpRequest.request('api/order/addOrder', 'POST', data, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						let obj = {
							id:res.data.order_pay_no,// 支付订单号
							pay_price:res.data.pay_price,// 支付金额
						}
						uni.redirectTo({
							url:'/pages_index/zhifu?msg=' + encodeURIComponent(JSON.stringify(obj))
						})
					}else if(res.code==0){
						httpRequest.toast(res.msg);
					}
					// uni.hideLoading()
				}).catch(err => {
					httpRequest.toast(err.msg);
					// uni.hideLoading()
				})
			},
			// 删除购物车
			scgwc() {
				httpRequest.request('api/cart/delCart', 'POST', {
					data:this.data
				}, false, false, true).then(res => {
				})
			},
			add() { //添加地址
				uni.navigateTo({
					url: "/pages_index/shouhuodz?type=1"
				})
			},
			changetype() {
				this.order_type = this.order_type == 1 ? 2 : 1
			}
		}
	}
</script>

<style lang="scss">
	.theme {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.aside {
		width: 75%;
		margin-left: 25rpx;
	}

	.name {
		display: inline-block;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.tel {
		margin-left: 50rpx;
	}

	.address {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 30rpx;
	}

	.daowu {
		background-color: RGBA(227, 227, 227, 1);
		border-radius: 50rpx;
		width: 300rpx;
	}

	.daodian {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 150rpx;
		text-align: center;
		padding: 11rpx 0;
	}

	.wuliu {
		width: 150rpx;
		padding: 11rpx 0;
		border-radius: 50rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		background-color: RGBA(212, 139, 57, 1);
	}

	.addshouhuo {
		margin-top: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(212, 139, 57, 1);
		line-height: 42rpx;
		text-align: center;
		background-color: #FFFFFF;
		padding: 62rpx 0;
	}

	/*中间商品列表*/
	.productimg {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx;
	}

	.txt2 {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 40rpx;
	}

	.txt3 {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.txt4 {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(212, 139, 57, 1);
		line-height: 30rpx;
	}

	/*运输*/
	.yunshu {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.yunfei {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		padding-bottom: 25rpx;
	}

	.baoyou {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 30rpx;
	}

	/*bottom*/
	.bottomsubmitbtn {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		left: 0rpx;
		padding: 30rpx 50rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		line-height: 100%;

		.zongji {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}

		.price1 {
			font-size: 36rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #D48B39;
		}

		.submitcontext {
			background-color: #d48b39;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 120rpx;
			padding: 2rpx 48rpx;
			text-align: center;
		}
	}
</style>